<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div>
    <div class="container">
    <el-card id="goodsBack">
      <h3>搜索条件：</h3><br><br>
      <el-label>商品名称：</el-label>
      <el-input v-model="goodsName" type="text" placeholder="输入商品名称" style="width: 200px;"
                prefix-icon="el-icon-search"></el-input>
      <el-button v-on:click="submits" type="primary">查询</el-button>
      <el-button v-on:click="deletetables" type="warning">删除</el-button>

    </el-card>

    <br><br>

    <el-table :data="responseData" @selection-change="handleSelectionChange" height="940"  class="table">
      <el-table-column prop="id" label="id" width="280"></el-table-column>
      <el-table-column prop="goodsId" label="货物编码" width="280"></el-table-column>
      <el-table-column prop="goodsName" label="货物名称" width="370"></el-table-column>
      <el-table-column prop="purchasePrice" label="商品进价" width="280"></el-table-column>
      <el-table-column prop="sellPrice" label="商品售价" width="280"></el-table-column>
      <el-table-column prop="shopId" label="店铺编码" width="280"></el-table-column>
      <el-table-column prop="inventory" label="货物库存数量" width="280"></el-table-column>
      <!--多选操作进行删除-->
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->

      <el-table-column label="操作" width="170">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
    </el-table>
  </div>
  </div>
  
</template>

<style scoped>
  /* .goods {
    width:auto !important;
    right:0px
  } */
  .table {
    width: 87%;
    font-size: 14px;
    margin-left: 230px;
  }

</style>

<script>
  export default {
    name: 'Goods',
    data() {
      return {
        goodsName: '',
        responseData: [],
        resSelected: []
      }
    },
    methods: {
      //提交
      submits() {
        // var arr = this;
        this.$axios.post('/goods', {
          goodsName: this.goodsName

        }).then(successResponse => {

          if (successResponse.data.code === 200) {
            //不用转换JSON 我的老天啊
            this.responseData = successResponse.data.result;

          } else {
            alert("查询错误");
            console.log("出错信息：" + successResponse.data.code)
          }
        }).catch(failResponse => {

        })
      },
      //删除
      deletetables() {
        let resId = this.resSelected.map(item => item.id);
            console.log(resId);
        this.$confirm('确定要删除选中的这几项吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.$axios.post(
            '/delete',
            {
              resId: resId
            }
          ).then(resp => {
            if (resp.data.code === 200) {
              alert("删除成功！" + resp.data.result)
            }
          })
        }).catch((fail) => {
          console.log(fail)
        })
      },
      //选中
      handleSelectionChange(sels) {
        this.resSelected = sels
      },

      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }

    }
  }
</script>
